<template>
    <div>


      <el-form :inline="true" :model="after" class="demo-form-inline" label-width="110px" size="medium" label-position="left">

        <el-row>

          <el-col :span="12">
            <el-form-item label="任务名称：">
              <span >{{after.task_name}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="工期（天）：">
              <div v-if="before && before.duration && before.duration != after.duration" style="color: red">
                <span>{{before.duration}}</span><span> -> </span><span>{{after.duration}}</span>
              </div>
              <div v-else><span>{{after.duration}}</span></div>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="计划开始时间：">
              <div v-if="before && before.start_date && before.start_date != after.start_date" style="color: red">
                <span>{{before.start_date}}</span><span> -> </span><span>{{after.start_date}}</span>
              </div>
              <div v-else><span>{{after.start_date}}</span></div>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="计划结束时间：">
              <div v-if="before && before.end_date && before.end_date != after.end_date" style="color: red">
                <span>{{before.end_date}}</span><span> -> </span><span>{{after.end_date}}</span>
              </div>
              <div v-else><span>{{after.end_date}}</span></div>
            </el-form-item>
          </el-col>



          <el-col :span="12">
            <el-form-item label="任务负责人：">
              <div v-if="before && (before.person_in_charge && after.person_in_charge)">
                <div v-if="before.person_in_charge.member_id != after.person_in_charge.member_id" style="color: red">
                  <span>{{before.person_in_charge.member_name}}</span><span> -> </span><span>{{after.person_in_charge.member_name}}</span>
                </div>
                <div v-else><span>{{before.person_in_charge.member_name}}</span></div>
              </div>
              <div v-else><span v-if="after.person_in_charge">{{after.person_in_charge.member_name}}</span></div>

            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="after.type == 3">
            <el-form-item label="任务参与人：">

              <div v-for="(item,index) in after.task_member">

                <div style="width: 120px">
                  {{item.member_name}}
                </div>

              </div>

            </el-form-item>
          </el-col>

          <el-col :span="12" v-else-if="after.type == 1 || !after.isChangeMember">
            <el-form-item label="任务参与人：">
              <div v-for="(item,index) in before.task_member" style="display: flex">

                <div style="width: 120px">
                  {{item.member_name}}
                </div>

              </div>

            </el-form-item>
          </el-col>


          <template v-else>
            <el-col :span="12">
              <el-form-item label="原任务参与人">
                <div v-for="(item,index) in before.task_member" style="display: flex">

                  <div v-for="(item,index) in before.task_member">
                    <span>{{item.member_name}}</span>
                    <span v-if="index != before.task_member.length - 1">,</span>
                  </div>
<!--                  <div v-if="after.task_member.findIndex(a=>a.member_id == item.member_id) == -1" style="margin-left: 20px">-->
<!--                    <span style="color:red">更改</span>-->
<!--                  </div>-->

                </div>

              </el-form-item>

            </el-col>

            <el-col :span="12">
              <el-form-item label="现任务参与人：">

                <div style="display: flex">

                  <div v-for="(item,index) in after.task_member">
                    <span>{{item.member_name}}</span>
                    <span v-if="index != after.task_member.length - 1">,</span>
                  </div>

                </div>

              </el-form-item>

            </el-col>
          </template>



        </el-row>

      </el-form>

      <el-table
        v-if="after.type == 3"
        size="medium"
        :data="after.files"
        align="center"
        border
        style="width: 100%">
        <el-table-column
          align="center"
          prop="file_name"
          label="文档名称">
        </el-table-column>
        <el-table-column
          align="center"
          prop="type_name"
          label="文档类型">
        </el-table-column>
        <el-table-column
          align="center"
          label="申报所需文件">
          <template slot-scope="scope">
            <span>{{scope.row.need?'是':'否'}}</span>
          </template>
        </el-table-column>
      </el-table>

      <el-table
        v-else-if="after.newFiles && after.newFiles.length"
        size="medium"
        :data="after.newFiles"
        align="center"
        border
        style="width: 100%">
        <el-table-column
          align="center"
          prop="file_name"
          label="新增文档">
        </el-table-column>
        <el-table-column
          align="center"
          prop="type_name"
          label="文档类型">
        </el-table-column>
        <el-table-column
          align="center"
          label="申报所需文件">
          <template slot-scope="scope">
            <span>{{scope.row.need?'是':'否'}}</span>
          </template>
        </el-table-column>
      </el-table>


    </div>
</template>

<script>
    export default {
        name: "projectTaskDetailView",
        props:{
            before:{
                type:Object,
                default:{}
            },
            after:Object
        }
    }
</script>

<style scoped>

</style>
